<template>
  <div class="select-option-list">
      <div v-for="row in listData" :key="row.id">
          <div v-html="rowRender"></div>
      </div>
  </div>
</template>

<script>
export default {
  subModuleStore: true,
  data() {
    return {
      //底部最大触发事件距离
      turnningDistance: 100
    };
  },
  methods: {
    rowRender(row) {
      return row.name;
    },
    listScroll(e) {
      var el = e.currentTarget;
      //判断滚动条与底部距离是否小于最大值，触发事件
      if (
        el.scrollHeight - el.scrollTop - el.clientHeight <
        this.turnningDistance
      ) {
        this.$emit("turning");
      }
    }
  },
  mounted() {
    this.$el
      .getElementsByClassName("select-option-list")[0]
      .addEventListener("scroll", e => this.listScroll(e));
  }
};
</script>

<style>

</style>
